<template>
  <div class="a">
    <el-card>
      <!-- 搜索 -->
      <div class="b">
        <el-form :inline="true">
          <el-form-item label="用户名">
            <el-input v-model="name" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="success">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import UserAPI, { type Userparams } from "@/api/system/user.api"
import { ref } from "vue"
let name = ref("")
const tableData = ref([])
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


let params = ref<Userparams>({
  userName: "",
  role: 1,
  pageIndex: 1,
  pageSize: 10

})
//获取列表
function getList() {
  UserAPI.getUser(params.value).then(data => {
    console.log(data);
  })
}
onMounted(() => {
  getList
})
</script>

<style scoped>
.a {
  padding: 20px;
}
</style>
